import './region.less';
import { Table } from 'antd'
import React, {FC, useState, useEffect} from "react"
const Region:FC = function () {

  const columns:any = [
    { title: '序号',  align:'center', dataIndex: 'key',     key: 'key' },
    { title: '姓名',  align:'center', dataIndex: 'name',    key: 'name' },
    { title: '手机号',align:'center', dataIndex: 'ipohon',  key: 'ipohon' },
    { title: '公司',  align:'center', dataIndex: 'address', key: 'address' },
    { title: '新房',  align:'center', dataIndex: 'bridal',  key: 'address' },
    { title: '二手房',align:'center', dataIndex: 'second',  key: 'address' },
    { title: '租房',  align:'center', dataIndex: 'renting', key: 'address' },
    { title: '状态',  align:'center', dataIndex: 'status',  key: 'address' },
    { title: '操作',  align:'center', dataIndex: '',        key: 'x',
      render: (row:any) => <div>
        <span  style={{marginLeft:'8px'}} >编辑</span>
        <span  style={{marginLeft:'8px'}} onClick={()=>setbtnremove(row.key)} >删除</span>
        <span  style={{marginLeft:'8px'}}>启用</span>
        <span  style={{marginLeft:'8px'}}>禁用</span> 
      </div>,
    },
  ];
  const data = [
    {
      key: 1,
      name: 'John Brown',
      ipohon:'123',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'在职',
      age: 32,
      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
    },{
      key: 2,
      name: 'Jim Green',
      ipohon:'234',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'离职',
      age: 42,
      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
    },{
      key: 3,
      name: 'Not Expandable',
      ipohon:'345',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'在职',
      age: 29,
      description: 'This not expandable',
    },{
      key: 4,
      name: 'Joe Black',
      ipohon:'456',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'离职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 5,
      name: 'Sheng hua',
      ipohon:'567',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'在职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 6,
      name: 'Ning hua',
      ipohon:'678',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'在职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 7,
      name: 'Long Liang',
      ipohon:'789',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'离职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 8,
      name: 'Black liang',
      ipohon:'890',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'在职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 9,
      name: 'Bai du',
      ipohon:'901',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'离职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 10,
      name: 'Mei tuan',
      ipohon:'902',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'在职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 11,
      name: 'Meng xua',
      ipohon:'923',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'离职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 12,
      name: 'Wang lian',
      ipohon:'945',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'在职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },{
      key: 13,
      name: 'Kob table',
      ipohon:'457',
      address: '八威集团',
      bridal:'beiJingHaiDian',
      second:'erShouFang',
      renting:'ZhuFang',
      status:'在职',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },
  ];
  let [title1, settitle1] = useState('')
  let [title2, settitle2] = useState('')
  let [pagedata, setpagedata] = useState(data)
  let [searchName, setsearchName] = useState('')
  let [searchName2, setsearchName2] = useState('')
  let [btnremove, setbtnremove] = useState('') as any

  useEffect(() => {
    if(searchName){
      let newdata = data.filter(item=>item.ipohon.includes(searchName))
      if(searchName2){
          newdata = pagedata.filter(item=>item.status.includes(searchName2))
          setpagedata(newdata)
      }
      setpagedata(newdata)
    }
    if(searchName2){
      let newdata = data.filter(item=>item.status.includes(searchName2))
      if(searchName){
          newdata = pagedata.filter(item=>item.ipohon.includes(searchName))
          setpagedata(newdata)
      }
      setpagedata(newdata)
    }

    if(searchName && searchName2){
      let newdata = data.filter(item=>item.ipohon.includes(searchName))
      let res = newdata.filter(item=>item.status.includes(searchName2))
      setpagedata(res)
    }

    
    if(btnremove){
      console.log(btnremove)
      let a = pagedata.filter(item=>item.key!==btnremove)
      setpagedata(a)
    }
  }, [searchName,searchName2,btnremove])

  function serchall(title1:string,title2:string){
    setsearchName(title1)
    setsearchName2(title2)
    console.log(title1)
    console.log(title2)
  }
  return (
    <div className='region'>
      <div className='region_box'>
        <div>手机号:<input type="text" value={title1} onChange={e=>settitle1(e.target.value)}  /></div>
        <div>状态:<input type="text" value={title2} onChange={e=>settitle2(e.target.value)} /></div>
        <button onClick={()=>serchall(title1,title2)} >查询</button>
        <button>新建</button>
      </div>
      <Table columns={columns} dataSource={pagedata} scroll={{ x: 1300 }} />
    </div>
  );
}
export default Region